<template>
	<view class="xb-share">
		<image src="/static/xb-share/top_img.png" class="xb-share-img" mode="widthFix"></image>
		<view class="xb-share-content">
			<text class="xb-share-desc">分享好友得免费打印额度</text>
			<view class="gui-margin-top-large gui-block-text" style="width: 100%;">
				<button type="default" class="gui-button gui-bg-primary gui-block-text" open-type="share">
					<text class="gui-icons gui-color-white gui-button-text gui-text-block">&#xe622; 立即分享</text>
				</button>
			</view>
			<view class="gui-margin-top">
				<text class="gui-text gui-color-black gui-text-block">我的分享</text>
				<text class="gui-text gui-color-black" style="padding: 0 15rpx;"> | </text>
				<text class="gui-text gui-color-black gui-text-block">活动规则</text>
			</view>
		</view>
		<gui-popup ref="guipopupforshare" position="bottom">
					<view class="gui-relative gui-box-shadow gui-bg-gray">
						<view class="gui-grids gui-flex gui-rows gui-wrap gui-share">
							<view class="gui-grids-items gui-flex gui-columns gui-align-items-center" hover-class="gui-tap" @tap="shareWeChat()">
								<image class="gui-grids-icon-img" src="../../static/xb-share/pyq.png" mode="widthFix"></image>
								<text class="gui-grids-text gui-color-gray">朋友圈</text>
							</view>
							<view class="gui-grids-items gui-flex gui-columns gui-align-items-center" hover-class="gui-tap" >
								<image class="gui-grids-icon-img" src="../../static/xb-share/wechat.png" mode="widthFix"></image>
								<text class="gui-grids-text gui-color-gray">微信好友</text>
							</view>
						</view>
						<!-- iphone 底部操作按钮躲避 -->
						<gui-iphone-bottom></gui-iphone-bottom>
					</view>
				</gui-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	onLoad() {},
	methods: {
		openShare : function(){
					//this.$refs.guipopupforshare.open()
		},
		
		shareWeChat:function(){
			uni.share({
			    provider: "weixin",
			    scene: "WXSceneSession",
			    type: 1,
			    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
			    success: function (res) {
			        console.log("success:" + JSON.stringify(res));
			    },
			    fail: function (err) {
			        console.log("fail:" + JSON.stringify(err));
			    }
			});
		}
	}
};
</script>

<style>
page {
	background-color: #d63e3d;
}
.xb-share-margin-top {
	margin-top: 20px;
}
.xb-share-img {
	width: 750rpx;
}
.xb-share-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 50rpx;
	margin: 10rpx 50rpx 50rpx 50rpx;
	background-color: #ffffff;
	border-radius: 15rpx;
}
.xb-share-title {
	font-size: 30rpx;
}
.xb-share-code {
	font-size: 40rpx;
	color: red;
}
.xb-share-desc {
	font-size: 24rpx;
	color: #808080;
}
.gui-grids-items{width:138rpx; margin:20rpx 0;}
.gui-share{padding:10rpx 30rpx;}
</style>
